<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>采用jQ来解决跨域</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>

    <input type="text" id="mess" placeholder="根据市获取区县"> <input type="button" value="查询" >
    <div id="message"></div>
    <script>
    
        $(function(){
            $("input[type=button]").on("click",function(){
                var mess = document.getElementById("mess").value;
                // jQ方法封装的XMLHttpRequest 对象提供的一个方法
                $.ajax({
                    type: "get",
                    url: "http://api.jisuapi.com/area/city",
                    data: "appkey=835b04488704f2ab&parentid="+mess,
                    dataType : "jsonp",     // 开启跨域 
                    success: function(msg){
                        var arr = [];
                        for(i=0;i<msg.result.length;i++){
                            arr.push("\n地方："+msg.result[i].name+"，区号："+msg.result[i].areacode+"，邮编："+msg.result[i].zipcode + "\n");
                        }

                       document.getElementById("message").innerHTML=arr;
                        console.log(msg);
                       
                    }
                })

            })
        })
    
    </script>
    
</body>
</html>